<template>
    <ContentWrap>
        <CardTitle title="Descriptions 使用" />
        <p>
          <code class="code-block">
            &lt;Descriptions :schema="schema" :data="data" /&gt;
        </code>
        <pre class="code-block" >
          <code>
 &lt;script setup lang="ts"&gt;

const schema = [
    {
        field: 'name',
        label: '姓名'
    },
    {
        field: 'age',
        label: '年龄'
    },
    {
        field: 'sex',
        label: '性别'
    },
    {
        field: 'address',
        label: '地址'
    }
]

const data = {
    name: '张三',
    age: 18,
    sex: '男'
}
&lt;/script&gt;
          </code>
    </pre>
    <CardTitle title="Descriptions 属性" />
    <table class="properties-table mt-20px">
      <thead>
        <tr>
          <th>属性</th>
          <th>类型</th>
          <th>默认值</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>mobile</td>
          <td>Boolean</td>
          <td>false</td>
          <td>是否为移动端展示模式</td>
        </tr>
        <tr>
          <td>title</td>
          <td>String</td>
          <td>''</td>
          <td>描述列表的标题</td>
        </tr>
        <tr>
          <td>message</td>
          <td>String</td>
          <td>''</td>
          <td>描述列表的附加信息</td>
        </tr>
        <tr>
          <td>collapse</td>
          <td>Boolean</td>
          <td>true</td>
          <td>是否可折叠</td>
        </tr>
        <tr>
          <td>columns</td>
          <td>Number</td>
          <td>1</td>
          <td>列数</td>
        </tr>
        <tr>
          <td>schema</td>
          <td>Array&lt;DescriptionsSchema&gt;</td>
          <td>[]</td>
          <td>描述列表的配置项</td>
        </tr>
        <tr>
          <td>data</td>
          <td>Object</td>
          <td>{}</td>
          <td>描述列表的数据源</td>
        </tr>
      </tbody>
    </table>
        </p>
        <CardTitle title="Descriptions 示例 " />
        <Descriptions :schema="schema" :data="data" title="描述列表" collapse="false"/>
    </ContentWrap>
</template>

<script setup lang="ts">

const schema = [
    {
        field: 'name',
        label: '姓名'
    },
    {
        field: 'age',
        label: '年龄'
    },
    {
        field: 'sex',
        label: '性别'
    },
    {
        field: 'address',
        label: '地址'
    }
]

const data = {
    name: '张三',
    age: 18,
    sex: '男'
}
</script>

<style lang="scss" scoped></style>